<template>
	<view class="page-container">
		
		<!-- 自定义导航 -->
		<view class="fixed" :style="{height: stickyHeight + 'px'}" v-if="isFixed">
			<view class="navigation-title-bar">{{pageTitle}}</view>
		</view>
		
		<!-- 轮播广告 -->
		<view class="banner-swiper">
			<st-swiper :swiper-list="bannerList" align="center" :imgHeight="232" :marginBottom="32"></st-swiper>
		</view>
	
		<view class="ship-container">
			<!-- 搜索模块 -->
			<view class="search-block" :class="{'theme-blue':tabCurrent == '1'}">
				<view class="search-tab-nav">
					<view class="tab-item" :class="{active:tabCurrent == '0'}" @click="tabClick('0')">航线</view>
					<view class="tab-item" :class="{active:tabCurrent == '1'}" @click="tabClick('1')">船票</view>
				</view>
				<view class="search-tab-content">
					<view class="search-item">
						<view class="r_start" @click="goDestination('start')">
							<view class="txt">出发港口</view>
							<view class="city" v-if="startDest.cityname">{{startDest.cityname}}</view>
							<view class="city c-grey" v-else>请选择</view>
						</view>
						<view class="r_mid" @click="exchangeDest"><text class="iconfont">&#xe7a5;</text></view>
						<view class="r_end" @click="goDestination('end')">
							<view class="txt">到达港口</view>
							<view class="city" v-if="endDest.cityname">{{endDest.cityname}}</view>
							<view class="city c-grey" v-else>请选择</view>
						</view>
					</view>
					<view class="search-item">
						<view class="s_date" v-if="tabCurrent == '1'">
							<view @click="dateCalendarPicker">
								<view class="txt">出发时间</view>
								<view class="date">{{scheduleDate}}</view>
							</view>
						</view>
						<view class="s-ship" :class="{flexAll: tabCurrent == '0'}">
							<picker @change="searchShipPicker" :range="pithyBrandList" range-key="name">
								<view class="txt">邮轮</view>
								<view class="ship" :class="{'c-grey': !shipData.id}">{{shipData.id ? shipData.name : '请选择'}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="search-btn" @click="searchSingle">查询</view>
				<view class="search-tag" v-if="hotLines.length">
					<view class="search-tag__bar">热门航线</view>
					<view class="search-tag__group">
						<view class="item" v-for="(item,index) in hotLines" :key="index" @click="toDateList(item)">
							{{item.lines_name}}
						</view>
					</view>
				</view>
				<view class="search-tag" v-if="brandList.length">
					<view class="search-tag__bar">邮轮系列</view>
					<view class="search-tag__group">
						<view class="item" v-for="(item, index) in brandList" :key="item.id" @click="toLineList(item)">
							{{item.suppliername}}
						</view>
					</view>
				</view>
				<!-- 通知栏 -->
				<view class="notice-block" v-if="noticeText">
					<uni-notice-bar scrollable showIcon single :speed="100" color="#FFAD22" :text="noticeText"></uni-notice-bar>
				</view>
			</view>
			
			<!-- 导航模块 -->
			<view class="ship-nav-block" v-if="navList.length">
				<swiper class="ship-nav-swiper" @change="swiperChange" :style="{height: shipNavHeight + 'rpx'}">
					<swiper-item v-for="(item, index) in navList" :key="index">
						<view class="ship-nav-group">
							<view class="ship-nav-item" v-for="citem in item" :key="citem.id" @click="toNavPage(citem)">
								<image class="icon" :src="citem.m_ico" mode="scaleToFill"></image>
								<view class="text">{{citem.m_title}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="ship-indicator-dots" v-if="navList.length > 1">
					<view 
						v-for="(item, index) in navList"
					    :class="['item', swiperActive === index ? 'active' : '']"
					    :key="index"></view>
				</view>
			</view>
			
			<!-- 广告栏 -->
			<view class="hot-banner-block" v-if="searchBottomBanner.length">
				<image v-for="item in searchBottomBanner" :key="item.id" class="img" :src="item.adsrc" mode="scaleToFill" @click="toAdLink(item)"></image>
			</view>
			
			<!-- 爆款推荐 -->
			<view class="module-block" v-if="hotProducts.length">
				<view class="module-block__bar">
					<view class="title">爆款推荐</view>
					<view class="more" @click="toProdList('hot')">更多<text class="more-icon iconfont">&#xe627;</text></view>
				</view>
				<scroll-view class="module-block-scroll" scroll-x>
					<view class="hot-product-group">
						<view class="item" v-for="item in hotProducts" :key="item.id" @click="toLineDetail(item.id)">
							<view class="hd">
								<view class="label">{{item.startcity_text}}→{{item.finaldest_text}}</view>
								<view class="date">船期：{{item.start_date}} ~ {{item.end_date}}</view>
								<image class="img" :src="item.litpic" mode="scaleToFill"></image>
							</view>
							<view class="bd">
								<view class="tit">{{item.line_name}}</view>
								<view class="price" v-if="item.price > 0">{{globalExchangeRate}}<text class="num">{{item.price}}</text>起/人</view>
								<view class="dx" v-else>电询</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 特价推荐 -->
			<view class="module-block" v-if="saleProducts.length">
				<view class="module-block__bar">
					<view class="title">特价推荐</view>
					<view class="more" @click="toProdList('recommend')">更多<text class="more-icon iconfont">&#xe627;</text></view>
				</view>
				<view class="sale-product-group">
					<view class="item" v-for="item in saleProducts" :key="item.id" @click="toLineDetail(item.id)">
						<view class="hd">
							<view class="label">{{item.startcity_text}}→{{item.finaldest_text}}</view>
							<view class="date">船期：{{item.start_date}} ~ {{item.end_date}}</view>
							<image class="img" :src="item.litpic" mode="scaleToFill"></image>
						</view>
						<view class="bd">
							<view class="tit">{{item.line_name}}</view>
							<view class="price" v-if="item.price > 0">{{globalExchangeRate}}<text class="num">{{item.price}}</text>起/人</view>
							<view class="dx" v-else>电询</view>
						</view>
					</view>
				</view>
			</view>
		
			<!-- 邮轮品牌 -->
			<view class="module-block" v-if="brandList.length">
				<view class="module-block__bar">
					<view class="title">邮轮品牌</view>
					<view class="more" @click="toBrandDetail('')">更多<text class="more-icon iconfont">&#xe627;</text></view>
				</view>
				<scroll-view class="module-block-scroll" scroll-x>
					<view class="hot-brand-group">
						<view class="item" v-for="(item, index) in brandList" :key="item.id" @click="toBrandDetail(item.id)">
							<image class="hd" :src="item.litpic" mode="scaleToFill"></image>
							<view class="bd">
								<view class="tit">{{item.suppliername}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		
			<!-- 游玩攻略 -->
			<view class="module-block" v-if="tabGroup.length">
				<view class="module-block__bar">
					<view class="title">游玩攻略</view>
					<view class="more" @click="toArticle">更多<text class="iconfont">&#xe627;</text></view>
				</view>
				<v-tabs
				v-model="tabActive" 
				:tabs="tabGroup" 
				shape="arc" 
				field="name" 
				color="#666" 
				bgColor="transparent" 
				:activeColor="activeColor" 
				activeFontSize="34rpx" 
				lineHeight="8rpx" 
				:lineScale="0.6" 
				lineRadius="0" 
				:lineColor="lineColor" 
				@change="clickTab">
				</v-tabs>
				<view class="ship-article-group">
					<view class="item" v-for="item in articleList" :key="item.id" @click="toArticleDetail(item.id)">
						<image class="hd" :src="item.litpic" mode="scaleToFill"></image>
						<view class="bd">
							<view class="tit">{{item.title}}</view>
							<view class="txt">
								{{item.description}}
							</view>
						</view>
					</view>
					<!-- 无数据 -->
					<st-empty-msg v-if="!articleList.length" noMsg="暂无数据!" :showHande="false"></st-empty-msg>
				</view>
			</view>
		
			<!-- 听他们说 -->
			<view class="module-block" v-if="commentList.length">
				<view class="module-block__bar">
					<view class="title">听他们说</view>
				</view>
				<view class="ship-comment-group">
					<view class="item" v-for="item in commentList" :key="item.id">
						<view class="hd">
							<image class="img" :src="item.litpic" mode="scaleToFill"></image>
							<view class="info">
								<view class="name">{{item.nickname}}</view>
								<view class="date">{{item.addtime}}</view>
							</view>
							<uni-rate
							color="#e0e0e0" 
							active-color="#FFA100" 
							:value="item.level" 
							:size="13" 
							:margin="3" 
							readonly />
						</view>
						<view class="bd">{{item.content}}</view>
					</view>
				</view>
			</view>
		
		</view>
	
		<!-- 底部备案信息 -->
		<st-footer-filing></st-footer-filing>
		
		<!-- 自定义tabBar -->
		<st-customize-footer></st-customize-footer>
		
		<!-- 营销推荐 -->	
		<st-screen-advertising></st-screen-advertising>
		 
	
	</view>
</template>

<script>
	import { getProDetailPage } from '@/utils/toPath.js'
	import { adsClientNo, adsPath } from '@/utils/ads.js'
	import { get_date_format, check_app_install } from '@/utils/utils.js'
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	export default {
		components: {
			stCustomizeFooter
		},
		props: {
			// 滚动距离
			scrollTop: [Number, String],
			// 航期时间
			scheduleDate: {
				type: String,
				default: ''
			},
			// 出发地
			startDest: {
				type: Object,
				default(){
					return {
						destid: '',
						cityname: ''
					}
				}
			},
			// 到达地
			endDest: {
				type: Object,
				default(){
					return {
						destid: '',
						cityname: ''
					}
				}
			}
		},
		data() {
			return {
				isFixed: false,
				stickyHeight: 0, // 导航栏高度
				bannerList: [], // 广告列表
				searchBottomBanner: [], // 搜索兰下方广告
				
				navList: [],
				shipNavHeight: 160,
				swiperActive: 0,
				
				tabCurrent: 0,
				shipData: {},
				noticeText: '',
				pithyBrandList: [],
				brandList: [], // 游轮品牌
				hotLines: [], // 热门航线
				
				hotProducts: [], // 爆款推荐
				saleProducts: [], // 特价推荐
				
				// tab栏属性设置
				tabActive: 0,
				tabGroup: [],
				activeColor: "#222",
				lineColor: "#2dbb55",
				
				articleList: [],
				
				commentList: [], // 评论列表
				
				reload: false,
				
				pageTitle: uni.getStorageSync('cfg_home_page_title'),
			}
		},
		created() {
			let { stickyHeight, menuBottom, menuHeight } = getApp().globalData
			this.stickyHeight = stickyHeight
			
			this.loadDatas()
		},
		watch: {
			scrollTop(newVal, oldVal) {
				if (newVal > 200) {
					this.isFixed = true
				} else {
					this.isFixed = false
				}
			}
		},
		computed: {
			searchOffsetTop() {
				return this.stickyHeight - this.menuBottom - this.menuHeight
			}
		},
		methods: {
			
			// 数据加载
			loadDatas(){
				this.getSysConfig()
				//banner
				this.getbanners()
				this.getSearchBottomBanner()
				this.getIndexNav()
				//邮轮航线
				this.getLineList()
				// 游轮品牌
				this.getshipBrand()
				// 爆款推荐
				this.getShipTrip()
				// 特价推荐
				this.getShipSale()
				// 文章
				this.getArticle()
				// 评论列表
				this.getCommentList()
			},
			
			//检查是否需要相关配置
			async getSysConfig() {
				let params = {
					method: 'api/v2/system/get_sys_configs',
					filed: 'cfg_ship_notice'
				}
				let res = await this.$http(params)
				if (res.status) {
					const {cfg_ship_notice} = res.data
					this.noticeText = this.removeHtmlTags(cfg_ship_notice)
				}
			},
			
			// 广告跳转
			toAdLink({adtype, typeid, proid, adlink, adname}){
				adsPath(adtype, typeid, proid, adlink, adname)
			},
			
			// 轮播广告
			async getbanners() {
				let client_no = adsClientNo()
				let params = {
					method: 'api/v2/system/new_ads',
					prefix: 's_index',
					custom_label: 'uni_no312_index_banner',
					client_no
				}
				let res = await this.$http(params)
				if (res.status) {
					this.bannerList = res.data
				}
			},
			
			// 搜索下方广告
			async getSearchBottomBanner() {
				let client_no = adsClientNo()
				let params = {
					method: 'api/v2/system/new_ads',
					prefix: 's_index',
					custom_label: 'uni_no312_index_sub',
					client_no
				}
				let res = await this.$http(params)
				if (res.status) {
					this.searchBottomBanner = res.data.slice(0, 2)
				}
			},
			
			//筛选切换
			tabClick(index) {
				this.tabCurrent = index
			},
			
			//选择地点
			goDestination(type) {
				let dest, destination
				if (type === 'start') {
					dest = this.startDest
				} else if (type === 'end') {
					dest = this.endDest
				}
				destination = encodeURIComponent(JSON.stringify(dest))
				uni.navigateTo({
					url: `/subPackages/ships/destination?type=${type}&destination=${destination}`
				})
			},
			
			//切换出发地和目的地
			exchangeDest() {
				let sdest = {
						...this.startDest
					},
					edest = {
						...this.endDest
					}
			
				if (!sdest.destid && !edest.destid) {
					uni.showToast({
						title: '请先选择一个目的地',
						icon: 'none'
					})
					return
				}
				
				this.$emit('changeCity')
				
			},
			
			// 航期选择日期
			dateCalendarPicker(){
				uni.navigateTo({
					url: `/subPackages/ships/calendar?startDate=${this.scheduleDate}`
				})
			},
			
			// 选择邮轮
			searchShipPicker({ detail: { value } }) {
				let {id, name} = this.pithyBrandList[value]
				this.shipData = {id, name}
			},
			
			//查询航期
			searchSingle() {
				let url, params = '',
					startid = this.startDest.destid,
					endid = this.endDest.destid,
					scheduleDate = this.scheduleDate,
					shipid = this.shipData.id,
					start = encodeURIComponent(JSON.stringify(this.startDest)),
					end = encodeURIComponent(JSON.stringify(this.endDest)),
					data = encodeURIComponent(JSON.stringify(this.shipData))
			
				if (startid) {
					params += `start=${start}`
				}
			
				if (endid) {
					params += `&end=${end}`
				}
				
				if (this.tabCurrent == '0') {
					url = `/subPackages/ships/lineList?${params}`
				} else if (this.tabCurrent == '1') {
					url = `/subPackages/ships/dateList?${params}&date=${scheduleDate}`
				}
				
				if(shipid){
					url += `&ship=${data}`
				}
			
				uni.navigateTo({
					url
				})
			
			},
			
			// 首页导航
			async getIndexNav() {
				let res, client_no = adsClientNo(),
					params = {
						client_no,
						method: 'api/v2/index/index_nav',
					};
				res = await this.$http(params)
				if (res.status) {
					const {list} = res.data
					this.shipNavHeight = list.length > 5 ? (list.length > 10 ? 346 : 320) : 160
					this.navList = this.sliceArray(list, 10)
				}
			},
			
			// 切换swiper
			swiperChange({ detail: { current } }) {
			    this.swiperActive = current
			},
			
			// 前往导航所在页面
			toNavPage(item) {
				adsPath(item.type, item.m_typeid, item.product_id, item.m_url, item.m_title,item.is_nested);
			},
			
			// 导航数组转换
			sliceArray(arr, chunkSize){
				return Array.from({ length: Math.ceil(arr.length / chunkSize) }, (_, index) =>
				  arr.slice(index * chunkSize, index * chunkSize + chunkSize)
				)
			},
			
			// 跳转列表
			toProdList(id){
				uni.navigateTo({
					url: `/subPackages/ships/lineList?attrid=${id}`
				})
			},
			
			// 航线详情
			toLineDetail(id){
				uni.navigateTo({
					url: `/subPackages/ships/lineDetail?id=${id}`
				})
			},
			
			// 邮轮航期
			toDateList(item) {
				const {startcity, dest_id, lines_name} = item
				const cityname = lines_name.replace(/\s/g, "").split('-')
				const startDest = {
					destid: startcity,
					cityname: cityname[0]
				}
				const endDest = {
					destid: dest_id,
					cityname: cityname[1]
				}
				const start = encodeURIComponent(JSON.stringify(startDest))
				const end = encodeURIComponent(JSON.stringify(endDest))
				uni.navigateTo({
					url: `/subPackages/ships/dateList?start=${start}&end=${end}`
				})
				
			},
			
			// 游轮系列
			toLineList(item){
				const {id, suppliername: name} = item
				const data = encodeURIComponent(JSON.stringify({id,name}))
				uni.navigateTo({
					url: `/subPackages/ships/lineList?ship=${data}`
				})
			},
			
			// 邮轮介绍
			toBrandDetail(id) {
				let url = "/subPackages/ships/shipDetail"
				if(id){
					url = `/subPackages/ships/shipDetail?brandid=${id}`
				}
				uni.navigateTo({
					url
				})
			},
			
			// 热门航线
			async getLineList() {
				let params = {
					method: "api/v2/ship/index_search_hot_line",
				}
				let res = await this.$http(params)
				if (res.status) {
					this.hotLines = res.data.list
				}
			},
			
			// 邮轮品牌
			async getshipBrand() {
				let params = {
					method: "api/v2/ship/company_list"
				}
				let res = await this.$http(params)
				if (res.status) {
					this.brandList = res.data.list
					this.pithyBrandList = this.brandList.map(({id, suppliername: name}) => ({id, name}))
					this.pithyBrandList.unshift({id: 0, name: '全部'})
				}
			},
			
			// 爆款推荐
			async getShipTrip() {
				let params = {
					method: "api/v2/ship/index_common_list"
				}
				let res = await this.$http(params);
				if (res.status) {
					this.hotProducts = res.data.list;
				}
			},
			
			// 特价推荐
			async getShipSale() {
				let params = {
					method: "api/v2/ship/index_special_list"
				}
				let res = await this.$http(params);
				if (res.status) {
					this.saleProducts = res.data.list;
				}
			},
			
			// 攻略分类
			async getArticle(){
				let res, params = {
					method: "api/v2/article/get_first_arr"
				}
				res = await this.$http(params)
				if(res.status){
					const list = res.data
					this.tabGroup = list.map(({id, kindname: name}) => ({id, name}))
					this.getArticleList(list[0].id)
				}
			},
			
			// 攻略列表
			async getArticleList(attr_ids){
				let res, params = {
					method: "api/v2/article/get_list",
					attr_ids,
					page: 1,
					pagesize: 5
				}
				uni.showLoading({
					title: '数据加载中...'
				})
				res = await this.$http(params)
				uni.hideLoading()
				if(res.status){
					this.articleList = res.data
				}
			},
			
			// 切换文章分类
			clickTab(index){
				this.getArticleList(this.tabGroup[index].id)
			},
			
			// 跳转文章栏目
			toArticle(){
				uni.navigateTo({
					url: '/subPackages/strategy/list'
				})
			},
			
			// 跳转文章详情
			toArticleDetail(id){
				uni.navigateTo({
					url: `/subPackages/strategy/detail?id=${id}`
				})
			},
			
			// 评论列表
			async getCommentList(){
				let params = {
					method: "api/v2/ship/index_comment_list"
				}
				let res = await this.$http(params);
				if (res.status) {
					this.commentList = res.data.list;
				}
			},
			
			// 替换html
			removeHtmlTags(value) {
			    return value ? value.replace(/<[^>]+>/g, '') : ''
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	
.fixed {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 111;
	background: #fff;
}

.navigation-title-bar {
	position: absolute;
	left: 24rpx;
	bottom: 8rpx;
	height: 64rpx;
	line-height: 64rpx;
	font-size: 32rpx;
	font-weight: bold;
}
	
.ship-container {
	padding: 0 26rpx;
	position: relative;
	z-index: 1;
}

/* 搜索 */
.search-block {
	padding: 12rpx 30rpx 0;
	margin-top: -50rpx;
	margin-bottom: 28rpx;
	position: relative;
	z-index: 10;
	overflow: hidden;
	border-radius: 30rpx;
	background: #fff;

	&.theme-blue {
		.search-tab-nav {
			.tab-item.active {
				&::after {
					background: #2577E3;
				}
			}
		}

		.search-tab-content {
			.search-item {
				.r_mid {
					.iconfont {
						color: #2577E3
					}
				}
			}
		}

		.search-btn {
			background: #2577E3;
		}
	}

	.search-tab-nav {
		display: flex;
		justify-content: center;

		.tab-item {
			padding: 8px 0;
			margin: 0 40rpx;
			position: relative;
			font-size: 32rpx;

			&.active {
				&::after {
					content: "";
					display: block;
					width: 100%;
					height: 6px;
					position: absolute;
					left: 0;
					bottom: 0;
					border-radius: 8rpx;
					transform: scale(.8);
					background: #2DBB55;
				}

				font-weight: bold;
			}
		}
	}

	.search-tab-content {
		margin-top: 8px;

		.search-item {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.r_start,
			.r_end,
			.s_date,
			.s-ship {
				flex: 0 0 40%;
				padding: 32rpx 0 16rpx;
				border-bottom: 1px solid #f5f5f5;

				.txt {
					color: #9e9e9e;
					margin-bottom: 6px;
					font-size: 24rpx;
				}

				.city,
				.date,
				.ship {
					@extend .ellipse;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 36rpx;
					font-weight: bold;
				}
				.c-grey{
					color: #ccc;
					font-weight: normal;
				}
			}

			.r_mid {
				flex: 0 0 20%;
				padding: 0 12px;
				text-align: center;
				box-sizing: border-box;

				.iconfont {
					color: #2DBB55;
					font-size: 60rpx;
				}
			}

			.r_end,
			.s-ship {
				text-align: right;
				min-width: 0;
			}
			.s-ship.flexAll{
				flex: 1 1 auto;
				text-align: left;
			}
		}
	}

	.search-btn {
		color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		margin-top: 20px;
		font-size: 34rpx;
		font-weight: bold;
		border-radius: 200rpx;
		background: #2DBB55;
	}

	.search-tag {
		padding-top: 30rpx;

		&__bar {
			font-size: 28rpx;
		}

		&__group {
			display: flex;
			flex-wrap: wrap;
			max-height: 114rpx;
			overflow: hidden;
			margin-top: 8rpx;

			.item {
				color: #666;
				padding: 8rpx 12rpx;
				margin: 6rpx 12rpx 6rpx 0;
				font-size: 24rpx;
				border-radius: 40px;
				background: #f7f7f7;
			}
		}
	}
}

/* 通告栏 */
.notice-block {
	margin: 30rpx -30rpx 0;
}

/deep/ .notice-block .uni-noticebar {
	/* #ifdef H5 */
	padding: 12rpx 30rpx !important;
	/* #endif */
	/* #ifndef H5 */
	padding: 8rpx 30rpx !important;
	/* #endif */
	margin-bottom: 0 !important;
	background: #FFF9EF !important;
}

/deep/ .notice-block .uni-noticebar .uni-noticebar__content-text {
	font-size: 22rpx !important;
}

/deep/ .notice-block .uni-noticebar .uni-icons {
	font-size: 32rpx !important
}

.ship-nav-block {
	padding: 12rpx 0;
	position: relative;
	margin-bottom: 30rpx;
	border-radius: 28rpx;
	background-color: rgba(255, 255, 255, .9);
	.ship-nav-swiper{
		width: 100%;
		height: 320rpx;
		box-sizing: content-box;
	}
	.ship-nav-group{
		display: flex;
		flex-wrap: wrap;
		.ship-nav-item {
			width: 20%;
			padding: 20rpx 0;
			text-align: center;
		
			.icon {
				width: 80rpx;
				height: 80rpx;
				vertical-align: top;
			}
		
			.text {
				@extend .ellipse;
				margin-top: 8rpx;
				font-size: $uni-font-size-sm;
			}
		}
	}
	.ship-indicator-dots{
		display: flex;
		justify-content: center;
		padding: 0 24rpx;
		position: absolute;
		left: 0;
		bottom: 20rpx;
		width: 100%;
		box-sizing: border-box;
		.item {
			width: 16rpx;
			height: 16rpx;
			margin: 0 6rpx;
			border-radius: 50%;
			background: #ccc;
			&.active {
				background: #2DBB55;
			}
		}
	}
}

.hot-banner-block{
	display: flex;
	justify-content: space-between;
	margin-bottom: 28rpx;
	.img{
		flex: 0 0 calc((100% - 10px) / 2);
		height: 148rpx;
		border-radius: 12rpx;
		&:last-child{
			margin-left: 20rpx;
		}
	}
}

/* 公共模块 */
.module-block {
	margin-bottom: 24rpx;
	background-color: #fff;
	border-radius: 20rpx;
	&__bar{
		@include justifyspacec;
		padding: 24rpx 20rpx;
		font-size: $uni-font-size-paragraph;
		.title{
			color: #222;
			font-size: 34rpx;
			font-weight: bold
		}
		.more{
			color: #2DBB55;
			font-size: 24rpx;
			.more-icon{
				vertical-align: middle;
				margin: -6rpx 0 0 4rpx;
				font-size: 28rpx;
			}
		}
	}
}

.module-block-scroll{
	width: 100%;
	-webkit-overflow-scrolling: touch;
	::-webkit-scrollbar{
		width: 0;
		height: 0;
		background-color: transparent;
	}
}

/* 爆款推荐 */
.hot-product-group{
	display: flex;
	padding: 0 20rpx 32rpx;
	box-sizing: border-box;
	.item{
		flex: 0 0 250rpx;
		width: 250rpx;
		margin-right: 12rpx;
		overflow: hidden;
		border-radius: 12rpx;
		box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F0F0;
		.hd{
			width: 250rpx;
			height: 200rpx;
			position: relative;
			.label{
				color: #fff;
				padding: 6rpx 12rpx;
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				z-index: 2;
				border-radius: 8rpx;
				font-size: 22rpx;
				background: rgba(0,0,0,.7);
			}
			.date{
				@include ellipse;
				color: #fff;
				padding: 12rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
				font-size: 22rpx;
				background: linear-gradient(360deg, #444 0%, rgba(5,5,5,0) 100%);
			}
			.img{
				width: 250rpx;
				height: 200rpx;
			}
		}
		.bd{
			padding: 12rpx;
			.tit{
				@include ellipses;
				height: 64rpx;
				line-height: 32rpx;
				margin-bottom: 12rpx;
				font-size: 26rpx
			}
			.price{
				color: #FF6913;
				margin-bottom: 4rpx;
				font-size: 22rpx;
				.num{
					font-size: 30rpx;
				}
			}
			.del{
				color: #999;
				text-decoration: line-through;
				font-size: 24rpx;
			}
			.dx{
				color: #FF6913;
				font-size: 30rpx;
			}
		}
	}
}

/*  特价推荐 */
.sale-product-group{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 0 20rpx 12rpx;
	.item{
		flex: 0 0 calc((100% - 20rpx) / 2);
		width: calc((100% - 20rpx) / 2);
		margin-bottom: 20rpx;
		overflow: hidden;
		border-radius: 20rpx;
		box-shadow: 0rpx 8rpx 20rpx 0rpx #F0F0F0;
		.hd{
			width: 100%;
			height: 200rpx;
			position: relative;
			.label{
				color: #fff;
				padding: 6rpx 12rpx;
				position: absolute;
				top: 10rpx;
				left: 10rpx;
				z-index: 2;
				border-radius: 8rpx;
				font-size: 22rpx;
				background: rgba(0,0,0,.7);
			}
			.date{
				@include ellipse;
				color: #fff;
				padding: 12rpx;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 2;
				font-size: 22rpx;
				background: linear-gradient(360deg, #444 0%, rgba(5,5,5,0) 100%);
			}
			.img{
				width: 100%;
				height: 200rpx;
			}
		}
		.bd{
			padding: 12rpx;
			.tit{
				@include ellipses;
				height: 64rpx;
				line-height: 32rpx;
				margin-bottom: 12rpx;
				font-size: 26rpx
			}
			.price{
				color: #FF6913;
				margin-bottom: 4rpx;
				font-size: 22rpx;
				.num{
					font-size: 30rpx;
				}
			}
			.del{
				color: #999;
				text-decoration: line-through;
				font-size: 24rpx;
			}
			.dx{
				color: #FF6913;
				font-size: 30rpx;
			}
		}
	}
}

/* 邮轮品牌 */
.hot-brand-group{
	display: flex;
	box-sizing: border-box;
	padding: 0 20rpx 20rpx;
	.item{
		flex: 0 0 196rpx;
		width: 196rpx;
		margin-right: 20rpx;
		.hd{
			width: 196rpx;
			height: 196rpx;
			border-radius: 12rpx;
		}
		.bd{
			padding: 12rpx 6rpx;
			text-align: center;
			.tit{
				@include ellipse;
				line-height: 32rpx;
				margin-bottom: 4rpx;
				font-size: 26rpx
			}
		}
	}
}

/* 听他们说 */
.ship-comment-group{
	padding: 0 20rpx;
	.item{
		padding: 20rpx 0;
		.hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.img{
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
			}
			.info{
				flex: 1 1 auto;
				padding: 0 12rpx;
				.name{
					font-size: 24rpx
				}
				.date{
					color: #999;
					font-size: 22rpx
				}
			}
		}
		.bd{
			color: #666;
			line-height: 40rpx;
			padding: 24rpx 20rpx;
			margin-top: 20rpx;
			border-radius: 12rpx;
			font-size: 26rpx;
			background: #F6F8FA;
		}
	}
}
	
/* 游玩攻略 */
.ship-article-group{
	padding: 20rpx;
	.item{
		display: flex;
		margin-bottom: 20rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.hd{
			flex: 0 0 220rpx;
			width: 220rpx;
			height: 220rpx;
			border-radius: 12rpx;
			background: #e7e7e7;
		}
		.bd{
			flex: 1 1 auto;
			margin-left: 20rpx;
			.tit{
				height: 72rpx;
				line-height: 36rpx;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin-bottom: 12rpx;
				font-size: 28rpx
			}
			.txt{
				color: #999;
				line-height: 36rpx;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				font-size: 24rpx
			}
		}
	}
}
</style>